/**
 * Created by Administrator on 2018/3/18 0018.
 */

import React from 'react';
import {
    Route,
    Link,
    Switch,
} from 'react-router-dom'

import TopBar from '../common/topbar';


class PaymentMethod extends React.Component {
    constructor(props) {
        super();
        console.log('props.match',props.match);
        this.state = {
            id: props.match.params.id,
            data: []
        }
    }
    componentDidMount() {
        let myRequest = 'http://localhost:4000/order/detail/?id='+ this.state.id;
        let myInit = {
            method: 'GET',
            mode: 'cors',
            cache: 'default',
            dataType: 'json',
        };
        window.fetch(myRequest, myInit).then((response) => {
            return response.json();
        }).then((json) => {
            this.setState({data: json.data});
        }).catch((err)=>{
            console.log(err);
        })
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextProps;
    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }
    onPay(_method){
        console.log('假设支付成功'+_method);
        this.props.history.push('/payment/'+this.state.id + '/1');
    }
    render(){
        let d = this.state.data||{};

        return (
            <div>
                <TopBar data={this.props} title="订单支付"/>
                <div className="payOrderBox">
                    <h3>订单信息</h3>
                    <div className="base">
                        <img src={decodeURIComponent(d.p_cover)} alt=""/>
                        <div className="title">产品名称：{decodeURIComponent(d.p_title)}</div>
                        <div className="price">订单价格：{d.o_price}</div>
                    </div>
                    <ul>
                        <li>份数：{d.o_copies}</li>

                        <li>优惠券：{d.o_coupon}</li>
                    </ul>
                </div>
                <div className="payMethodBox">
                    <h3>支付方式</h3>
                    <ul>
                        <li onClick={this.onPay.bind(this,'wechat')}>微信支付</li>
                        <li onClick={this.onPay.bind(this,'alipay')}>支付宝支付</li>
                        <li onClick={this.onPay.bind(this,'yinlian')}>银联支付</li>
                    </ul>
                </div>
            </div>
        );
    }

}


class PaymentSuccess extends React.Component {
    constructor(props) {
        super();
        console.log('props.match',props.match);
        this.state = {
            id: props.match.params.id,
            data: []
        }
    }
    componentDidMount() {
        let myRequest = 'http://localhost:4000/order/detail/?id='+ this.state.id;
        let myInit = {
            method: 'GET',
            mode: 'cors',
            cache: 'default',
            dataType: 'json',
        };
        window.fetch(myRequest, myInit).then((response) => {
            return response.json();
        }).then((json) => {
            this.setState({data: json.data});
        }).catch((err)=>{
            console.log(err);
        })
    }
    onHome(){
        this.props.history.replace('/');
    }
    render(){
        let d = this.state.data||{};
        return (
            <div>
                <TopBar data={this.props} title="支付结果"/>
                <div className="payOrderBox">
                    <h3>订单信息</h3>
                    <div className="base">
                        <img src={decodeURIComponent(d.p_cover)} alt=""/>
                        <div className="title">产品名称：{decodeURIComponent(d.p_title)}</div>
                        <div className="price">订单价格：{d.o_price}</div>
                    </div>
                    <ul>
                        <li>份数：{d.o_copies}</li>

                        <li>优惠券：{d.o_coupon}</li>
                    </ul>
                </div>
                <div className="payResultBox">
                    <div className="msg">支付成功</div>
                    <div className="ctrl">
                        <a onClick={this.onHome.bind(this)}>返回首页</a>
                        <Link to={"/order/" + d.id} className="a1">查看订单</Link>
                    </div>
                </div>
            </div>
        )
    }
}



class Payment extends React.Component{
    constructor(props){
        super();
    }
    render(){
        let match = this.props.match;
        return (
            <Switch>
                <Route exact path={`${match.url}/:id`} component={PaymentMethod}/>
                <Route exact path={`${match.url}/:id/1`} component={PaymentSuccess}/>
            </Switch>
            )
    }
}
export default Payment;
